<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <div class="btn-group" style="margin-top: 50px">
        <button class="btn btn-default" type="button" onclick="xuanzhong('2003Java')"><em
                class="glyphicon glyphicon-align-left"></em> 大数据2003JavaA
        </button>

      </div>
      <div class="jumbotron" style="margin-top: 50px;">
        <textarea style="width: 1000px;height: 200px" id="context"></textarea>
      </div>
      <button type="button" class="btn btn-default btn-primary" onclick="select()">查询</button>
    </div>
  </div>
</div>
</body>
</html>
<script>
  var type = "2003Java";
  function xuanzhong(t) {
    type = t;
    $("#context").val("");
  }
  function select() {
    var array = null;
    if (type==""){
      alert("请选择选择一个班级");
      return;
    }
    if (type=="2003Java"){
      array = [
        "郜志伟","李芸可","王楠楠","余遨","马英超","胡延啸","李卓毅","王献华","吴慧跃","韩政","裴天龙","毛利军","王琛舒"
      ];
      console.log(type+"一共"+array.length+"人");
    }
    else {
      alert("暂未维护，请联系管理员添加学生名单");
      return;
    }
    var val = $("#context").val();
    var context = "";
    for (var i = 0;i<array.length;i++){
      if (val.search(array[i])==-1){
        context +=array[i]+"\n";
      }
    }
    if (context==""){
      $("#context").val("全部签到");
    }else {
      $("#context").val(context);
    }

  }

</script>